<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Image quality study</title>

<style type="text/css">
body, input, select, td, li, div, textarea, p {
	font-size: 12px;
	line-height: 16px;
	font-family: verdana, arial, sans-serif;
}

body {
	margin: 5px;
	background-color: white;
}

h1 {
	font-size: 22px; 
	line-height: 34px;
	font-weight: bold; 
}

h2 {
	font-size: 14px; 
	font-weight: bold;
}
</style>

<script type="text/javascript" src="sprintf.js"></script>
<script language="Javascript">
//
// This method Gets URL Parameters (GUP)
//
function gup(name)
{
	var regexS = "[\\?&]"+name+"=([^&#]*)";
	var regex = new RegExp( regexS );
	var tmpURL = window.location.href;
	var results = regex.exec( tmpURL );

	if (results == null)
		return "";
	else
		return results[1];
}

//
// This method decodes the query parameters that were URL-encoded
//
function decode(strToDecode)
{
	var encoded = strToDecode;
	return unescape(encoded.replace(/\+/g,  " "));
}

var identifiers = new Array();
var slides = new Array();
var scores = new Array();
var slides_preload = new Array();
var slide_idx = 0;
var ready = false;

function gup_all()
{
	for (var i = 0; i < 100; i++)
	{
		var identifier = gup('identifier' + (i+1));
		var url = gup('url' + (i+1));

		if (identifier == '' || url == '')
			break;
		else
		{
			identifiers[i] = identifier;
			slides[i] = url;
			scores[i] = '';
		}
	}

	var reference_URL = gup('reference_URL');
	if (reference_URL != '')
	{
		identifiers.unshift('reference');
		slides.unshift(reference_URL);
		scores.unshift(5);
	}

	for (i = 0; i < slides.length; i++)
	{
		slides_preload[i] = new Image();
		slides_preload[i].onload = get_slide_size;
		slides_preload[i].src = slides[i];
	}
}

function get_slide_size()
{
	if (typeof get_slide_size.count == 'undefined')
	{
		get_slide_size.count  = 0;
		get_slide_size.width  = 0;
		get_slide_size.height = 0;
	}
	
	get_slide_size.width  = Math.max(get_slide_size.width,  this.width);
	get_slide_size.height = Math.max(get_slide_size.height, this.height);
	get_slide_size.count++;

//	document.getElementById("legend").innerHTML = 'Loading images... (' + get_slide_size.count + '/' + slides.length + ')';
	document.getElementById("legend").innerHTML = 'Loading images... (' + sprintf('%d', 100 * get_slide_size.count / slides.length) + '%)';

	if (get_slide_size.count == slides.length)
	{
		document.getElementById("slidecontainer").style.width = get_slide_size.width + 10;
		document.getElementById("slidecontainer").style.height = get_slide_size.height + 10;
		document.getElementById("slidecontainer").innerHTML = '<center><img src="' + slides[0] + '" id="slideimg" border="0"></center>';
		document.getElementById("legend").innerHTML = 'Showing Image 1';

		var control_html = '<form><table>';
		control_html += '<tr style="text-align: center; font-weight: bold;"><td>Image</td><td>Score</td></tr>';
		for (var i = 0; i < slides.length; i++)
		{
			control_html += sprintf('<tr>');
			control_html += sprintf('<td><input type="button" value="%d" onclick="show_slide(%d)" style="width: 40px"></td>', i+1, i);
			control_html += sprintf('<td>');

			if (identifiers[i] == 'reference')
			{
				// for differential quality measures, where a known reference is presented
				control_html += sprintf('5: Excellent');
			}
			else
			{
				control_html += sprintf('<select id="identifier%d" name="identifier%d" onchange="update_score(this, %d)">', i+1, i+1, i);
				control_html += sprintf('<option value="">Unrated</option>');
				control_html += sprintf('<option value="5">5: Excellent</option>');
				control_html += sprintf('<option value="4">4: Good</option>');
				control_html += sprintf('<option value="3">3: Fair</option>');
				control_html += sprintf('<option value="2">2: Poor</option>');
				control_html += sprintf('<option value="1">1: Bad</option>');
				control_html += sprintf('</select>');
			}

			control_html += sprintf('</td>');
			control_html += sprintf('</tr>');
		}
		control_html += '</table></form>';
		control_html += '<form id="mturk_form" method="POST" action="http://www.mturk.com/mturk/externalSubmit">';
		control_html += '<input type="hidden" id="assignmentId" name="assignmentId" value="">';
		control_html += '<input id="submitButton" type="button" value="Submit HIT" onclick="submit_hit()">';
		control_html += '</form>';

		document.getElementById("slidepager").innerHTML = control_html;

		document.getElementById('assignmentId').value = gup('assignmentId');
		// Check if the worker is PREVIEWING the HIT or if they've ACCEPTED the HIT
		if (gup('assignmentId') == "ASSIGNMENT_ID_NOT_AVAILABLE" || gup('assignmentId') == "")
		{
			// If we're previewing, disable the button and give it a helpful message
			document.getElementById('submitButton').disabled = true;
			document.getElementById('submitButton').style.color = '#FF8080';
			document.getElementById('submitButton').value = "ACCEPT the HIT to enable";
		}
		else
		{
			var form = document.getElementById('mturk_form');
			if (document.referrer && document.referrer.indexOf('workersandbox') != -1)
				form.action = "http://workersandbox.mturk.com/mturk/externalSubmit";
		}

		ready = true;
	}
}

function update_score(select, i)
{
	scores[i] = select.options[select.selectedIndex].value;
}

function prev()
{
	show_slide(slide_idx - 1);
}

function next()
{
	show_slide(slide_idx + 1);
}

function show_slide(index)
{
	if (ready && index >= 0 && index < slides.length)
	{
		slide_idx = index;
		document.getElementById("slideimg").src=slides[slide_idx];
		document.getElementById("legend").innerHTML = 'Showing Image ' + (slide_idx + 1);
	}
}

function submit_hit()
{
	for (var i = 0; i < scores.length; i++)
	{
		if (scores[i] == '')
		{
			alert(sprintf('Score for Image %d not set; HIT not submitted.', i+1));
			return;
		}
	}

	form = document.getElementById('mturk_form');
	for (var i = 0; i < scores.length; i++)
	{
		var input = document.createElement('input');

		input.type  = 'hidden';
		input.name  = identifiers[i];
		input.value = scores[i];

		form.appendChild(input);
	}
	form.submit();
}

</script>
</head>

<body onload="gup_all()">

<h1 align="center">Rate the quality of images</h1>
<p>Your task is to rate the quality of the images presented below, using the evaluation criteria defined in <a href="instructions.html" target="_blank">these instructions and examples</a> (updated December 18, 2010). This task can be completed in around 60 seconds.</p>
<p><b>IMPORTANT:</b> do NOT work on this HIT without carefully reading the instructions first, even if you have worked on our HITs before, because instructions often change from one day to the other.</p>
<br>

<center>
      <table>
        <tbody>
          <tr>
            <td align="center" width="100"><b>Score</b></td>
            <td width="200"><b>Quality</b></td>
            <td width="300"><b>Deterioration</b></td>
          </tr>
          <tr>
            <td align="center">5</td>
            <td>Excellent</td>
            <td>Imperceptible</td>
          </tr>
          <tr>
            <td align="center">4</td>
            <td>Good</td>
            <td>Just perceptible, but not annoying</td>
          </tr>
          <tr>
            <td align="center">3</td>
            <td>Fair</td>
            <td>Perceptible and slightly annoying</td>
          </tr>
          <tr>
            <td align="center">2</td>
            <td>Poor</td>
            <td>Annoying, but not objectionable</td>
          </tr>
          <tr>
            <td align="center">1</td>
            <td>Bad</td>
	    <td>Very annoying and objectionable</td>
          </tr>
        </tbody>
      </table>
</center>

<br><br>

<center>
<table cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="3" id="slidecontainer" style="border-width: 1px; border-style: solid;">
    </td>
    <td rowspan="2">
      <center>
        <div id="slidepager"></div>
      </center>
    </td>
  </tr>

  <tr>
    <td><p align="left"><a href="#" onClick="prev(); return false"><img src="arrowhead-solid-left.png" border="0"></a></td>
    <td><p align="center" id="legend">Loading images... (0%)</p></td>
    <td><p align="right"><a href="#" onClick="next(); return false"><img src="arrowhead-solid-right.png" border="0"></a></td>
  </tr>
</table>
</center>

</body>
</html>

